<script setup lang="ts">
import { useWebxRouteTabs, useWebxTable } from "@webxue/vue3-antdv-ui";
import { BaseApi } from "@/apis/base.api";
import { message } from "ant-design-vue";
import useCusRouter from "@/hooks/useCusRouter";

const { router } = useCusRouter();
const { addTab } = useWebxRouteTabs({ router });
const { searchForm, dataSource, columns, pagination, doRefresh, doSearch, doReset, doCreate, doUpdate, doDelete } = useWebxTable({
  searchForm:{
    name:""
  },
  tableColumns:[
    { title: "序号", dataIndex: "index", align: "center", width: 50 },
    { title: "字典名称", dataIndex: "dictName", width: 160 },
    { title: "字典类型", dataIndex: "dictType", width: 160 },
    { title: "适用范围", dataIndex: "dictUseType", width: 80 },
    { title: "状态", dataIndex: "status", width: 80 },
    { title: "更新时间", dataIndex: "updateDate", width: 130 },
    { title: "备注", dataIndex: "remark" },
    { title: "操作", dataIndex: "operate", width: 120 }
  ],
  async api(params){
    const response = await BaseApi.dictType.list({
      page: params.page,
      size: params.size,
      // keyword: searchForm.value.name
    });
    return Promise.resolve(response.data);
  },
  // 新增
  async onCreate() {
    addTab({
      title:"新增字典类型",
      href:"/dict/dictTypeForm",
      key:"create-dictType",
    })
  },
  // 编辑
  async onUpdate(record) {
    addTab({
      title:"编辑字典类型" + record.dictName,
      href:"/dict/dictTypeForm?dictTypeId=" + record.id,
      key:"edit-dictType" + record.id,
    })
  },
  // 删除
  async onDelete(record) {
    const response = await BaseApi.dictType.delete({ ids: record.id });
    if(response.success) {
      message.success("字典类型删除成功");
      await doSearch();
    }
  }
});

// 跳转到字典数据列表
const onPageToDictData = (record) => {
  addTab({
    title:"字典数据-" + record.dictName,
    href:`/dict/dictData?dictType=${record.dictType}&dictName=${record.dictName}`,
    key:"dict-dictData" + record.dictType
  })
};
</script>

<template>
  <div class="person-index flex flex-col gap-2">
    <!-- 查询条件 -->
    <WebxSearch
      :model="searchForm"
      @submit="doSearch"
      @reset="doReset"
    >
      <AFormItem label="关键词">
        <AInput v-model:value="searchForm.name" placeholder="请输入关键词" />
      </AFormItem>
    </WebxSearch>
    <!-- 表格 -->
    <WebxTable
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      @refresh="doRefresh"
      @create="doCreate"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'index'">{{ index + 1 }}</template>
        <template v-if="column.dataIndex === 'dictName'">
          <span class="text-blue-500 cursor-pointer" @click="onPageToDictData(record)">{{ record.dictName }}</span>
        </template>
        <template v-if="column.dataIndex === 'dictUseType'">
          <ATag color="blue" v-if="record.dictUseType === 'com'">公共</ATag>
          <ATag color="cyan" v-else-if="record.dictUseType === 'admin'">后台</ATag>
        </template>
        <template v-if="column.dataIndex === 'status'">
          <ATag color="green" v-if="record.status === 1">启用</ATag>
          <ATag color="pink" v-else-if="record.status === 2">停用</ATag>
          <ATag color="red" v-else-if="record.status === 3">删除</ATag>
        </template>
        <template v-if="column.dataIndex === 'operate'">
          <div class="flex gap-2">
            <WebxBtn operate="edit" @click="doUpdate(record)" />
            <WebxBtn operate="del" :modalContant="`确定要删除字典类型 ${record.dictName} 吗？`"
                     @delete="() => doDelete(record)" />
          </div>
        </template>
      </template>
    </WebxTable>
  </div>
</template>

<style scoped lang="less"></style>
